<template>

    <h2>修改房型</h2>
    <table border="1">
        <tr>
            <td>房型名称</td>
            <td>
                <input type="text" v-model="info.Rtype_Name">
            </td>
        </tr>
        <tr>
            <td>门市价</td>
            <td>
                <input type="number" v-model="info.Rtype_Price">
            </td>
        </tr>
        <tr>
            <td>押金</td>
            <td>
                <input type="number" v-model="info.Rtype_Depoosit">
            </td>
        </tr>
        <tr>
            <td>面积</td>
            <td>
                <input type="text" v-model="info.Rtype_Size">
            </td>
        </tr>
        <tr>
            <td>可住人数</td>
            <td>
                <input type="number" v-model="info.Rtype_Num">
            </td>
        </tr>
        <tr>
            <td>是否加床</td>
            <td>
                <input type="radio" :value="true" v-model="info.Rtype_AddBed">是
                <input type="radio"   :value="false" v-model="info.Rtype_AddBed">否
            </td>
        </tr>
        <tr>
            <td>房型图片</td>
            <td>
                <input type="file" @change="FileUpLoad">
                <img style="width: 60px;height: 60px;" :src="info.Rtype_Img">
            </td>
        </tr>
        <tr>
            <td>房型介绍</td>
            <td>
              <textarea v-model="info.Rtype_Info"></textarea>
            </td>
        </tr>
        <tr>
            <td>房型是否投放</td>
            <td>
                <input type="radio" :value="true" v-model="info.Rtype_State">投放
                <input type="radio"   :value="false" v-model="info.Rtype_State">暂不投放
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="保存" @click="SaveData">
            </td>
        </tr>
        
    </table>
    
    </template>
    
<script setup lang="ts">

import axios from "axios";
import { onMounted ,ref} from "vue";
import { useRoute ,useRouter} from "vue-router";

const router=useRouter();
const route=useRoute();


onMounted(()=>{
    LoadData();
})
//加载数据
const LoadData=()=>{

    axios.get('https://localhost:7153/api/T_RoomType/GetType',
    {
        params:{
            RoomTypeId:route.params.id
        }
    }
    
    )

    .then(res=>{
        info.value=res.data
    })

}


const info=ref({

  
  Rtype_Name: "",
  Rtype_Price: "",
  Rtype_Depoosit: "",
  Rtype_Size: "",
  Rtype_Num: "",
  Rtype_AddBed: true,
  Rtype_Img: "",
  Rtype_Info: "",
  Rtype_State: true,

})


//图片上传
const FileUpLoad=(e:any)=>{

var file=e.target.files[0];
var fd=new FormData();
fd.append("img",file);
axios.post('https://localhost:7153/api/Files/UpLoadFile',fd)

.then(res=>{
    info.value.Rtype_Img=res.data;
})

}

//修改
const SaveData=()=>{


if(info.value.Rtype_Name==""){
    alert("房型名称不能为空");
    return;
}

axios.put('https://localhost:7153/api/T_RoomType/UpdateRoomType',info.value)
.then(res=>{
    if(res.data>0){
        alert("房型修改成功");
        router.push("/ShowRoomType")
    }
    else{
        alert("修改失败");
    }
})




}

</script>